import React from "react";
import Control from "../component/Control";
import Panel from "../component/Panel";
import {isSuccess} from "../utils/FiveSuccess";
import {Button, Modal, message} from 'antd';
import TodoList from "./TodoList";

export default class FiveGame extends React.Component {
    constructor() {
        super();
        //初始化数组
        this.state = this.getInitData()
    }

    //   抽离出来的初始化数据的方法
    getInitData() {
        const boardData = []
        for (let i = 0; i < 15; i++) {
            boardData.push(new Array(15).fill(0))
        }
        this.history = [];
        return {
            //    棋盘数据
            boardData,
            isBlack: true,
            success: false
        }

    }

    //重新开始的方法
    reStart() {
        this.setState(this.getInitData())
    }

    //悔棋
    unDo() {
        if (this.history.length == 0) {
            message.warn("没有棋子了")
            return
        }
        this.setState(this.history.pop())
    }

    //需要在这里修改数据，获取点击的row和col
    playChess(row, col) {
        const {isBlack, boardData, success} = this.state;

        if (success) {
            message.info('本局已经结束,开始下一句吧');
            return;
        }

        this.history.push(JSON.parse(JSON.stringify(this.state)))

        boardData[row][col] = isBlack ? 1 : 2

        //落子
        // if (isSuccess(boardData, row, col)) {
        //     alert("赢了")
        // }

        const isFiveSuccess = isSuccess(boardData, row, col)


        this.setState({
            boardData,
            isBlack: !isBlack,
            success: isFiveSuccess
        })
    }

    componentDidUpdate() {

        if (this.state.success) {
            Modal.confirm({
                // icon: <ExclamationCircleOutlined/>,
                content: `恭喜【${this.state.isBlack ? '白棋' : '黑棋'}】获得游戏胜利`,
                cancelText: "取消",
                okText: "确定",
                onOk() {
                    console.log('OK');
                },
                onCancel() {
                    console.log('Cancel');
                },
            });
        }
    }


    render() {
        // console.log(this.state.boardData);
        return (

            <div className="five-game-container">
                <div className="five-game-bg"/>
                <Control reStart={this.reStart.bind(this)} unDo={this.unDo.bind(this)}/>
                <Panel boardData={this.state.boardData} playChess={this.playChess.bind(this)}/>
            </div>
        );

    }
}
